<template>
    <view class="content">
        <van-popup :position="sign=='StockOut'? 'top' :'bottom'" @click-overlay="onCloseCalendar" @close="onCloseCalendar" :show="show" round z-index="104" closeable poppable="false"
            custom-style="width: 100%;background:#ffffff;overflow: hidden; height:60% !important">
            <view class="popup-content">
                <!-- <view class="popup-main"> -->
                    <scroll-view :refresher-enabled="false" class="scroll-content" scroll-y :lower-threshold="80"  show-scrollbar="false">
                        <!-- <view style="display: flex; justify-content: space-between;">
                            <view class="popupTitle"> {{ title }}</view>
                            <van-icon name="cross"  size="15" @click="onCloseCalendar" />
                        </view> -->
                        <!-- <view class="calendarPopup-wrapper " v-if="sign !== 'StockOut'"> -->
                            <van-calendar  @close="onCloseCalendar" :poppable="false"   :show="sign !== 'StockOut'" title="日期选择"  :min-date="minDate" show-subtitle="true" show-title="true" row-height="48" color="#ff6203" type="range"  @confirm="onConfirmCalendar" />
                        <!-- </view> -->
                        <!-- <view class="calendarPopup-wrapper " v-if="sign=='StockOut'" > -->
                            <!-- <van-calendar :show="sign=='StockOut'" :poppable="false"  @close="onCloseCalendar" show-confirm="false" show-title="false" :min-date="minDate" color="#ff6203"  position="top"  row-height="48"/> -->
                        <!-- </view> -->
                    </scroll-view>
                    <!-- <van-toast id="van-toast" /> -->
                <!-- </view> -->
            </view>
        </van-popup>
    </view>
</template>

<script>
import Toast from '@/wxcomponents/vant/toast/toast'
export default {
    props: {
        show: {
            type: Boolean,
            default: () => false
        },
        signupRestriction: {
            type: Number,
            default: 0
        },
        sign: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            curS: 0,
            curSName: '',
            date: '',
            title: '报名限制',
            option: {},
            url: '',
            stepperValue: 1,
         
            popupHeight: '300',

            isCancel: true,
            minDate: (() => {
                const d = new Date();
                d.setMonth(d.getMonth() - 2);
                d.setDate(1);
                return d.getTime();
            })(),
            selectedType:null, //选择的条件
        }
    },

    computed: {
    },

    watch: {
        show: {
            immediate: true,
            handler(newVal) {
                console.log(newVal, 'newVal')
            }
        },
        // signupRestriction: {
        //     immediate: true,
        //     handler(newVal) {
        //         console.log(newVal, 'newVal')
        //         this.popupData.forEach(ele => {
        //             this.$set(ele, 'isChecked', ele.key == newVal)
        //         })
        //         this.selectedType = newVal
        //     }
        // }
    },
    onLoad () {

    },
    onReady () {
        // this.popupData.forEach(ele => {
        //     this.$set(ele, 'isChecked', false)
        // })
    },

    methods: {
        // 关闭弹窗
        onCloseCalendar () {
            this.isCancel = false
            this.$emit('onCloseCalendar', this.isCancel)
        },

        // 确认选择
        onConfirmCalendar( {detail} ) {
           console.log(detail)
           const startDateStr = this.formatFullDate(detail[0])
           const endDateStr = this.formatFullDate(detail[1])
           console.log(startDateStr, endDateStr)
           this.$emit('onConfirmCalendar', detail)
           this.onCloseCalendar()
        },
        formatFullDate(date) {
          
            const year = date.getFullYear()
            const month = String(date.getMonth() + 1).padStart(2, '0') // 月份补零
            const day = String(date.getDate()).padStart(2, '0')      // 日期补零
            if (this.sign === 'StockOut'){
                 return `${year}.${month}.${day}`
            }else{
                return `${year}-${month}-${day}`
            }
            // return `${year}-${month}-${day}`
        },
        
        // 出入库日历
        onConfirmStockOutCalendar( {detail} ) {
            console.log(detail)
            const currentDate = this.formatFullDate(detail)
            // const endDateStr = this.formatFullDate(detail[1])
            console.log(currentDate)
            this.$emit('onConfirmStockOutCalendar', currentDate)
            this.onCloseCalendar()
        },
    }

}
</script>
<style lang="scss" scoped>
.content{
    display: flex;
    flex-direction: column;
    height: 100%;
}

// 滚动
.scroll-content {
    flex: 1;
    height: 1px;
}
::v-deep .van-button__text {
    display: flex !important;
    flex-direction: column !important;
}
// 提示框
.popup-content {
    // padding: 48rpx;
    font-size: 12px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;

    .popup-main {
        height: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    .popupTitle {
        font-size: 20px;
        text-align: left;
        color: #111111;
        line-height: 20px;
    }

    .calendarPopup-wrapper {
        height: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        background-color: #FF6203;
    }

    .popupTips{
        font-size: 12px;
        text-align: left;
        color: #666666;
        background-color: #F0F0F0;
        padding-top: 10px ;
        padding-bottom: 10px;
        padding-left: 15px;
    }
    // 副标题
    .popupSubtitle{
        font-size: 14px;
        text-align: left;
        color: #666666;
        line-height: 14px;
        margin-top: 15px;
        margin-bottom: 30px;
    }



    .button {
        width: 100%;
        font-size: 16px;
        color: #ffffff;
        height: 44px;
        line-height: 44px;
        border-radius: 25px;
        border-style: initial !important;
        padding: 0 !important;
        background: #FF6203 !important;
    }
}
.reason-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;  // 设置间距
}

.reason-item {
    flex: 0 0 48%;  // 每行两个，留2%作为间隔
    border: 2rpx solid #E6E6E6;
    border-radius: 16rpx;
    padding: 20rpx;
    text-align: center;
    box-sizing: border-box;
    transition: all 0.3s;
    color: #333333;
    font-size: 32rpx;

    &.active {
        border-color: #FF6203;
        background-color: #fff7f2;
        color:#FF6203 ;
        font-size: 32rpx;
    }
}
.checkBtn {
    background-color: #FF6203;
    border: none;
    border-radius: 38rpx;
    font-size: 28rpx;
    text-align: center;
    color: #FFFFFF;
    height: 86rpx;
    line-height: 86rpx;

    width: 100%;
}
.calendar{
    --calendar-height: 618px;
    // height: 768rpx !important;
    // --calendar-height: 768px !important;
}
.l20 {
    margin-left: 20px;
}

.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}
::v-deep .van-calendar__popup--bottom, .van-calendar__popup--top {
    height: 65% !important;
}

::v-deep.calendarPopup-wrapper .van-popup {
    height: 68% !important;
    max-height: 68%!important;
}
::v-deep .van-calendar{
    height: 100%!important;
}
::v-deep .van-calendar__header-title{
    font-weight: bold !important;
    font-size: 36rpx !important;
    color: #333333;
}

</style>
